<template>
  <div class="Weather">
    <div class="title">
      <h2>选择城市</h2>
      <p>(湖北省武汉市青山区)</p>
      <div class="selects">
        <select name="" id="" v-model="selectedProvince">
          <option value="">---请选择省份---</option>
          <option
            v-for="province in provinceData"
            :key="province.adcode"
            :value="province"
          >
            {{ province.name }}
          </option>
        </select>
        <select name="" id="" v-model="selectedCity">
          <option value="">---请选择城市---</option>
          <option
            v-for="city in selectedProvince.districts"
            :key="city.adcode"
            :value="city"
          >
            {{ city.name }}
          </option>
        </select>
        <select name="" id="" v-model="selectedDistrict">
          <option value="">---请选择区域---</option>
          <option
            v-for="district in selectedCity.districts"
            :key="district.adcode"
            :value="district"
          >
            {{ district.name }}
          </option>
        </select>
      </div>
    </div>
    <div class="text">
      <h3 for="" v-text="label"></h3>
    </div>
    <table class="table" border>
      <thead>
        <tr>
          <th>日期</th>
          <th>白天天气</th>
          <th>白天风向</th>
          <th>白天风力</th>
          <th>夜晚天气</th>
          <th>夜晚风向</th>
          <th>夜晚风力</th>
          <th>最高温度</th>
          <th>最低温度</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="weather in selectedDistrict.weatherData">
          <td>{{ weather.time }}</td>
          <td>{{ weather.day_weather }}</td>
          <td>{{ weather.day_wind_direction }}</td>
          <td>{{ weather.day_wind_direction_code }}</td>
          <td>{{ weather.night_weather }}</td>
          <td>{{ weather.night_wind_direction }}</td>
          <td>{{ weather.night_wind_direction_code }}</td>
          <td>{{ weather.max_degree }}</td>
          <td>{{ weather.min_degree }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import data from "../store/data";

const provinceData = data.provinceData;
console.log(provinceData);

const selectedProvince = ref("");
const selectedCity = ref("");
const selectedDistrict = ref("");
const label = ref();
// console.log(selectedDistrict.weatherData);

label.value = computed(() => {
  return (
    (selectedProvince.value.name ? selectedProvince.value.name : "") +
    (selectedCity.value.name ? selectedCity.value.name : "") +
    (selectedDistrict.value.name ? selectedDistrict.value.name : "") +
    "未来七天天气预报"
  );
});
// const s = (a, b, c) => {
//   console.log(a.name);
//   console.log(b.name);
//   console.log(c.name);
// };
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.Weather {
  width: 80%;
  background-color: rgba(203, 203, 203, 0.236);
  border: solid 2px #64646457;
  padding: 20px;
  margin: 0 auto;
  .title {
    color: #3c3c3c;
    width: 100%;
    display: flex;
    flex-direction: column;
    .selects {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      select {
        width: 100%;
        height: 50%;
      }
    }
  }
  .text {
    padding-bottom: 20px;
    color: #3d3d3d;
  }
  .table {
    background-color: rgba(0, 0, 0, 0.544);
    width: 100%;
    text-align: center;
    font-size: 15px;
    padding: 15px;
    border-collapse: collapse;
    color: aliceblue;
    thead {
    }
  }
}
</style>
